<template>
    <div class="app-container invoices-container">
        <el-tabs v-model="active" class="demo-tabs" @tab-change="handleClick">
            <el-tab-pane label="报销付款单" :name="5" />
            <el-tab-pane label="借款付款单" :name="6" />
            <el-tab-pane label="借款还款单" :name="7" />
        </el-tabs>
        <component :is="components[active]" @to="to"></component>
    </div>
</template>

<script setup>
import { ref } from "vue";
import Loan from "./components/Loan.vue";
import Reimbursed from "./components/Reimbursed.vue";
import Repay from "./components/Repay.vue";
import { useRoute, useRouter } from "vue-router";

const route = useRoute();
const router = useRouter()

const components = {
    5: Reimbursed,
    6: Loan,
    7: Repay
}
const active = ref(Number(route.query.type) || 5);
const handleClick = () => {
    router.replace({
        path: '/finance/reimbursed-pay',
        query: {}
    })
}
/**
 * 新开页面并跳转收支流水
 */
const to = (path,query) => {
    const routeInfo = router.resolve({
        path,
        query
    });
    const url = routeInfo.href;
    window.open(url, '_blank')
}
</script>

<style lang="scss" scoped>
.invoices-container {
    ::v-deep(.el-tabs__nav-wrap::after) {
        height: 1px;
    }

    ::v-deep(.el-tabs__item.is-active) {
        color: $topic;
    }

    ::v-deep(.el-tabs__active-bar) {
        background: $topic;
    }

    ::v-deep(.el-tabs__item:hover) {
        color: $topic;
    }
}
</style>